<template>
  <div>
    <van-nav-bar
        title="注册用户"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />
    <van-col span="24">
      <h1>虹映</h1>
      <h3>快来加入我们</h3>
      <van-form @submit="Register">
        <van-field
            v-model="user.phone"
            name="validator"
            left-icon="contact"
            placeholder="手机号"
            @blur="checkphone"
            :rules="[{validator, message: '请填写正确的手机号' }]"
        />
        <van-field
            v-model="user.password"
            name="validator"
            left-icon="contact"
            placeholder="密码"
            :rules="[{validator, message: '请填写正确的密码' }]"
        />
        <van-field
            v-model="user.code"
            name="pattern"
            left-icon="comment-o"
            placeholder="验证码"
            :rules="[{pattern,message: '请填写正确的验证码' }]"
        >
          <template #button>
            <van-button size="small" type="primary" @click="sendCode">{{ btnsendmsg }}</van-button>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="info" @click="checkCode" native-type="submit">下一步</van-button>
          已有账号请
          <router-link to="/">登录</router-link>
        </div>
      </van-form>
    </van-col>
  </div>
</template>

<script>
import {Toast} from 'vant';

export default {
  setup() {
    const onClickLeft = () => Toast('返回');
    return {
      onClickLeft
    };
  },
  data() {
    return {
      user: {
        phone: "",
        password: "",
        code: ""
      },
      btn1: true,
      btn2: true,
      btnsendmsg: "发送验证码",
      times: 60,

    }
  },
  methods: {
    Register() {
      //请求注册接口
      var that = this;
      console.log(JSON.stringify(this.user))
      this.axios.post('http://localhost:8080/api/user/register.do',
          "phone=" + this.user.phone + "&code=" + this.user.code + "&password=" + this.user.password)
          .then(function (res) {
            console.log(res);
            if (res.data.code == 10000) {
              that.$router.push("/details");
            } else {
              that.$toast(res.data.msg);
            }
          })
    },
    onClickLeft() {
      this.$router.push("Login")
    },
    sendCode() {
      var that = this;
      if (this.user.phone.length == 11) {//39.103.146.142
        this.axios.post('http://localhost:8080/api/sms/sendcode.do', "phone=" + this.user.phone).then(function (resp) {
          if (resp.data.code == 10000) {
            that.btnsendmsg = "再次发送(" + that.times + ")";
            that.djs();
            that.$toast("短信已发送成功")
          } else {
            that.$toast("请检查网络")
          }
        })
      } else {
        this.$toast("请输入正确的手机号")
      }
    },
    djs() {
      var that = this;
      that.btnsend = true;
      that.t = setInterval(function () {
        if (that.times > 1) {
          that.times--;
          that.btnsendmsg = "再次发送(" + that.times + ")";
        } else {
          //停止定时任务
          clearInterval(that.t);
          that.btnsendmsg = "再次发送";
          that.btnsend = false;
        }
      }, 1000);
    }, checkCode() {
      var that = this;
      this.axios.post('http://localhost:8080/api/sms/checkcode.do',
          "phone=" + this.user.phone + "&code=" + this.user.password)
          .then(function (res) {
            if (res.data.code == 10000) {
              that.btnadd = false;
              that.$toast("手机验证码校验成功");
            } else {
              console.log(res.data.msg);
              that.$toast(res.data.msg);
            }
          });
    }, checkphone() {
      var that = this;
      this.axios.post('http://localhost:8080/api/user/checkphone.do', "phone=" + this.user.phone)
          .then(function (res) {
            if (res.data.code == 10000) {
              that.btnadd = false;
              that.$toast("手机号可用");
            } else {
              console.log(res.data.msg);
              that.$toast(res.data.msg);
            }
          });
    }
  }
}
</script>

<style>
</style>
